<template>
  <b-scroll
    :pullDownRefresh="true"
    :pullUpLoad="true"
    @pullingDown="refreshHotMovie"
    @pullingUp="getNextPage"
    :click="true"
  >
    <movie-item
      v-for="(item,index) in hotMovieList"
      :key="index"
      :mitem="item"
      :p_imgs="hotMoviePreviewImages"
    ></movie-item>
  </b-scroll>
</template>

<script>
import movieItem from "./movieItem";
import BScroll from "./BScroll";
export default {
  name: "Hot",
  data() {
    return {
      movieIds: [],
      hotMovieList: [],
      hotMoviePreviewImages: [] //预览的高清电影海报图片集合
    };
  },
  async created() {
    try {
      this.showLoading();
      let result = await this.getHotMovie();
      this.hotMovieList = result.hotMovieList; //列表
      this.movieIds = result.movieIds; //电影电影的id
      this.hotMoviePreviewImages.push(...this.hotMovieList.map(item => item.p_img));
      this.hideLoading();
    } catch (error) {
      this.hideLoading();
    }
  },
  methods: {
    getHotMovie() {
      return new Promise((resolve, reject) => {
        this.$http
          .get("/ajax/movieOnInfoList")
          .then(res => {
            let hotMovieList = res.data.movieList.map(item => {
              item.img = item.img.replace("w.h", "128.180");
              let imgWidth = document.documentElement.clientWidth;
              let imgHeight = parseInt((imgWidth / 128) * 180);
              item.p_img = item.img.replace(
                "128.180",
                imgWidth + "." + imgHeight
              );
              return item;
            });
            resolve({ hotMovieList, movieIds: res.data.movieIds });
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    //下拉刷新
    async refreshHotMovie(scroll) {
      window.bscroll=scroll;
      try {
        this.showLoading();
        let result = await this.getHotMovie();
        this.hotMovieList = result.hotMovieList;
        this.movieIds=result.movieIds;
      } catch (error) {
        tihs.$toast("出错了");
        console.log(error);
      } finally {
        this.hideLoading();
        scroll.finishPullDown(); //结束下拉刷新
        this.$nextTick(()=>{
          scroll.refresh();
        });
        
      }
    },
    moreComingList() {
      return new Promise((resolve, reject) => {
        let lastMovieId = this.hotMovieList[this.hotMovieList.length - 1].id;
        let lastIndex = this.movieIds.indexOf(lastMovieId);
        this.$http
          .get("/ajax/moreComingList", {
            params: {
              token: "",
              movieIds: this.movieIds
                .slice(lastIndex + 1, lastIndex + 1 + 10)
                .join(",")
            }
          })
          .then(res => {
            let moreMovieList = res.data.coming.map(item => {
              item.img = item.img.replace("w.h", "128.180");
              let imgWidth = document.documentElement.clientWidth;
              let imgHeight = parseInt((imgWidth / 128) * 180);
              item.p_img = item.img.replace(
                "128.180",
                imgWidth + "." + imgHeight
              );
              return item;
            });
            resolve(moreMovieList);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    //上拉加载
    async getNextPage(scroll) {
      if(this.hotMovieList.length==this.movieIds.length){
        this.$toast("数据加载完啦");
      }
      else{
        this.showLoading({
          content:"正在加载"
        });
        let moreMovieList = await  this.moreComingList();
        this.hotMovieList.push(...moreMovieList);
        this.hotMoviePreviewImages=this.hotMovieList.map(item => item.p_img);
        this.hideLoading();
        scroll.finishPullUp();
        this.$nextTick(()=>{
          scroll.refresh();
        });
      }
    }
  },
  components: {
    movieItem,
    BScroll
  }
};
</script>

<style>
</style>
